<template>
  <div id="addQuestionView">
    <a-form
      ref="formRef"
      :model="form"
      :style="{ width: '600px' }"
      @submit="handleSubmit"
    >
      <a-form-item
        field="title"
        label="标题"
        :rules="[
          { required: true, message: '标题必须填写' },
          { minLength: 5, message: '标题长度不小于5' },
        ]"
        :validate-trigger="['change', 'input']"
      >
        <a-input v-model="form.title" placeholder="请输入标题..." />
      </a-form-item>
      <a-form-item field="tags" label="标签" feedback>
        <a-input-tag
          v-model="form.tags"
          placeholder="please enter your post..."
        />
      </a-form-item>
      <a-form-item field="content" label="题目内容" feedback>
        <MdEditor
          :value="form.content"
          :handle-change="onContentChange"
        ></MdEditor>
      </a-form-item>
      <a-form-item field="answer" label="答案" feedback>
        <MdEditor
          :value="form.answer"
          :handle-change="onAnswerChange"
        ></MdEditor>
      </a-form-item>
      <a-form-item label="判题配置" :content-flex="false" :merge-props="false">
        <a-space direction="vertical" fill>
          <a-form-item field="judgeConfig.memoryLimit" label="内存限制">
            <a-input-number
              :style="{ width: '320px' }"
              placeholder="Please Enter"
              v-model="form.judgeConfig.memoryLimit"
              min="0"
              mode="button"
              class="input-demo"
            />
          </a-form-item>
          <a-form-item field="judgeConfig.stackLimit" label="堆栈限制">
            <a-input-number
              :style="{ width: '320px' }"
              placeholder="Please Enter"
              v-model="form.judgeConfig.stackLimit"
              min="0"
              mode="button"
              class="input-demo"
            />
          </a-form-item>
          <a-form-item field="judgeConfig.timeLimit" label="时间限制">
            <a-input-number
              :style="{ width: '320px' }"
              placeholder="Please Enter"
              v-model="form.judgeConfig.timeLimit"
              min="0"
              mode="button"
              class="input-demo"
            />
          </a-form-item>
        </a-space>
      </a-form-item>
      <a-form-item
        v-for="(judgeCaseItem, index) of form.judgeCase"
        :field="`judgeCase[${index}].value`"
        :label="`用例-${index}`"
        :key="index"
      >
        <a-form-item label="输入配置" style="min-width: 500px">
          <a-input
            v-model="judgeCaseItem.input"
            placeholder="please enter your input..."
          />
        </a-form-item>
        <a-form-item label="输出配置" style="min-width: 500px">
          <a-input
            v-model="judgeCaseItem.output"
            placeholder="please enter your output..."
          />
        </a-form-item>
        <a-button
          type="primary"
          @click="handleDelete(index)"
          :style="{ marginLeft: '10px' }"
          >Delete
        </a-button>
      </a-form-item>
      <a-button
        @click="handleAdd"
        type="primary"
        size="mini"
        style="max-width: 300px; margin-left: 230px"
        >Add Post</a-button
      >
      <a-form-item style="margin-top: 50px">
        <a-space>
          <a-button type="primary" html-type="submit">Submit</a-button>
          <a-button type="primary" @click="$refs.formRef.resetFields()"
            >Reset</a-button
          >
        </a-space>
      </a-form-item>
    </a-form>
  </div>
  {{ form }}
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import MdEditor from "@/components/MdEditor.vue";
import { QuestionControllerService } from "../../../generate";
import message from "@arco-design/web-vue/es/message";

const form = reactive({
  answer: "",
  content: "",
  judgeCase: [
    {
      input: "",
      output: "",
    },
  ],
  judgeConfig: {
    memoryLimit: 0,
    stackLimit: 0,
    timeLimit: 0,
  },
  tags: [],
  title: "",
});
const onContentChange = (value: string) => {
  form.content = value;
};
const onAnswerChange = (value: string) => {
  form.answer = value;
};
const handleAdd = () => {
  form.judgeCase.push({
    input: "",
    output: "",
  });
};
const handleDelete = (index: number) => {
  console.log(index);
  form.judgeCase.splice(index, 1);
};
const handleSubmit = async () => {
  const res = await QuestionControllerService.addQuestionUsingPost(form);
  if (res.code === 0) {
    message.success("提交成功：" + res.message);
  } else {
    message.error("提交失败：" + res.message);
  }
};
</script>
<style>
#addQuestionView {
  maxwidth: 1550;
}
</style>
